<template>
  <div class="w-base">
    <div class="w-base-title">
      <h3 style="margin-top: 0">资源管理</h3>
    </div>
    <div class="w-base-container">
      <div>
        <div style="width: 96%;margin: 0 auto;">
          <h4>已创建（加入）课程</h4>
          <div class="panel-group course-group" id="accordion" role="tablist" aria-multiselectable="true">

          </div>
        </div>
        <div style="width: 96%;margin: 0 auto;">
          <div>
            <ul class="nav nav-tabs" role="tablist">
              <li role="presentation" class="active">
                <a href="#createCourse" aria-controls="createCourse" role="tab" data-toggle="tab">
                  创建课程
                </a>
              </li>
              <li role="presentation">
                <a href="#addCourse" aria-controls="addCourse" role="tab" data-toggle="tab">
                  查找课程
                </a>
              </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
              <div role="tabpanel" class="tab-pane active" id="createCourse">
                <form class="form-inline" id="create-course-form">
                  <div class="row">
                    <div class="col-xs-6">
                      <label for="courseName1" class="control-label">课程名：</label>
                      <input type="text" id="courseName1" class="form-control" name="courseName"
                             style="width: 80%"  placeholder="请输入课程名">
                    </div>
                    <div class="col-xs-6">
                      <label for="tags1" class="control-label">标签：</label>
                      <input type="text"  id="tags1" class="form-control" name="tags"
                             style="width: 80%" placeholder="标签输入格式：web android UI iOS">
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-xs-12">
                      <label for="description" class="control-label">课程描述：</label>
                      <input type="text" id="description" class="form-control" name="description"
                             style="width: 86.5%"  placeholder="请输入课程描述">
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-offset-5 col-sm-7">
                      <button class="btn btn-primary" id="create-course-button"
                              type="button" onclick="create_course()">
                        创建课程
                      </button>
                    </div>
                  </div>
                </form>
              </div>
              <div role="tabpanel" class="tab-pane" id="addCourse">
                <form class="form-inline" id="add-course-form">
                  <div class="row">
                    <div class="col-xs-6">
                      <label for="courseName2" class="control-label">课程名：</label>
                      <input type="text" id="courseName2" class="form-control" name="courseName"
                             style="width: 80%"  placeholder="课程名和标签二选一输入即可">
                    </div>
                    <div class="col-xs-6">
                      <label for="tags" class="control-label">标签：</label>
                      <input type="text"  id="tags" class="form-control" name="tags"
                             style="width: 80%" placeholder="标签输入格式：web android UI iOS">
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-offset-5 col-sm-7">
                      <button class="btn btn-primary" type="button" onclick="course_find()">
                        查找课程
                      </button>
                    </div>
                  </div>
                </form>
                <table class="table table-hover .table-bordered table-condensed course-table">
                  <tr><th>课程名</th> <th>描述</th><th>操作</th></tr>
                </table>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>
